<template>
  <!-- 按钮 -->
  <div v-if="element.type === 'button'" class="item item-flex">
    <div class="title"></div>
    <el-button disabled>
      <span class="require-icon" v-if="element.options.required">{{
        element.name
      }}</span>
      <span v-else>{{ element.name }}</span>
    </el-button>
  </div>
  <!-- 单行文本 -->
  <div
    v-if="['single-input', 'number', 'amount'].includes(element.type)"
    class="item item-flex"
  >
    <div class="title">
      <span class="require-icon" v-if="element.options.required">{{
        element.name
      }}</span>
      <span v-else>{{ element.name }}</span>
    </div>
    <el-input
      class="sky-item"
      :placeholder="element.options.placeholder"
      :model-value="localFormData"
      @update:model-value="handleChange"
      @blur="handleBlur"
      :disabled="element.options?.disabled"
    >
      <template v-if="element.options.appendSlot" #append>{{
        element.options.appendSlotContent
      }}</template>
    </el-input>
  </div>
  <!-- 多行文本 -->
  <div v-if="element.type === 'textarea'" class="item item-flex">
    <div class="title">
      <span class="require-icon" v-if="element.options.required">{{
        element.name
      }}</span>
      <span v-else>{{ element.name }}</span>
    </div>
    <el-input
      class="sky-item"
      type="textarea"
      :placeholder="element.options.placeholder"
      :model-value="element.options.defaultValue"
      disabled
    />
  </div>
  <!-- 描述说明 -->
  <div v-if="element.type === 'explain'" class="explain">
    {{ element.options.defaultValue }}
  </div>
  <!-- 描述文本 -->
  <div v-if="element.type === 'desc'" class="desc">
    <span
      :style="{
        fontSize: `${element.options.defaultValue}px`,
        fontWeight: element.isBold ? 600 : 400,
      }"
      >{{ element.name }}</span
    >
  </div>
  <!-- 分割线 -->
  <div v-if="element.type === 'divider'" class="divider-wrap">
    <el-divider>
      {{ element.name }}
    </el-divider>
  </div>
  <!-- 部门 -->
  <div v-if="element.type === 'section'" class="item item-flex">
    <div class="title">
      <span class="require-icon" v-if="element.options.required">{{
        element.name
      }}</span>
      <span v-else>{{ element.name }}</span>
    </div>
    <div class="section">
      <el-icon><Plus /></el-icon>
    </div>
  </div>
  <!-- 单选框组 -->
  <div v-if="element.type === 'radio'" class="item item-flex">
    <div class="title">
      <span class="require-icon" v-if="element.options.required">{{
        element.name
      }}</span>
      <span v-else>{{ element.name }}</span>
    </div>
    <el-radio-group
      :class="
        element.options.layout === '垂直布局'
          ? 'radio-verticel'
          : 'radio-horizontal'
      "
      :model-value="element.options.defaultValue"
      disabled
    >
      <template v-for="item in element.options.child" :key="item.label">
        <el-radio :label="item.label">{{ item.content }}</el-radio>
      </template>
    </el-radio-group>
  </div>
  <!-- 多选框组 -->
  <div v-if="element.type === 'checkbox'" class="item item-flex">
    <div class="title">
      <span class="require-icon" v-if="element.options.required">{{
        element.name
      }}</span>
      <span v-else>{{ element.name }}</span>
    </div>
    <el-checkbox-group
      :class="
        element.options.layout === '垂直布局'
          ? 'radio-verticel'
          : 'radio-horizontal'
      "
      :model-value="element.options.defaultValue"
      disabled
    >
      <template v-for="item in element.options.child" :key="item.label">
        <el-checkbox :label="item.label">{{ item.content }}</el-checkbox>
      </template>
    </el-checkbox-group>
  </div>
  <!-- 下拉框组 -->
  <div
    v-if="['single-select', 'multiple-select'].includes(element.type)"
    class="item item-flex"
  >
    <div class="title">
      <span class="require-icon" v-if="element.options.required">{{
        element.name
      }}</span>
      <span v-else>{{ element.name }}</span>
    </div>
    <el-select
      :placeholder="element.options.placeholder"
      size="large"
      :model-value="element.options.defaultValue"
      disabled
    >
      <el-option
        v-for="item in element.options.child"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </div>
  <!-- 日期选择器 -->
  <div v-if="element.type === 'date'" class="item item-flex">
    <div class="title">
      <span class="require-icon" v-if="element.options.required">{{
        element.name
      }}</span>
      <span v-else>{{ element.name }}</span>
    </div>
    <div class="flex-row">
      <el-date-picker
        style="flex: 1; margin-right: 10px"
        type="date"
        :placeholder="element.options.placeholder"
        value-format="YYYY-MM-DD"
        disabled
      />
    </div>
  </div>
  <!-- 时间日期选择器 -->
  <div v-if="element.type === 'datetime'" class="item item-flex">
    <div class="title">
      <span class="require-icon" v-if="element.options.required">{{
        element.name
      }}</span>
      <span v-else>{{ element.name }}</span>
    </div>
    <el-date-picker
      type="datetime"
      :placeholder="element.options.placeholder"
      :value-format="element.options.dateFormat"
      disabled
    />
  </div>
  <!-- 日期区间 -->
  <div v-if="element.type === 'date-range'" class="item item-flex">
    <!-- <template v-for="i in 2" :key="i"> -->
    <div class="title">
      <span class="require-icon" v-if="element.options.required">
        {{ element.name }}
      </span>
      <span v-else>{{ element.name }}</span>
    </div>
    <el-date-picker
      style="width: 100%; margin-bottom: 5px"
      type="datetimerange"
      :placeholder="element.options.placeholder"
      :value-format="element.options.dateFormat"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      disabled
    />
    <!-- </template> -->
    <div class="title">
      <span class="require-icon" v-if="element.options.required">
        {{ element.options.label3 }}
      </span>
      <span v-else>
        {{ element.options.label3 }}
      </span>
    </div>
    <el-input
      class="sky-item"
      :placeholder="element.options.label3Placeholder"
      disabled
    >
      <template v-if="element.options.appendSlot" #append>{{
        element.options.appendSlotContent
      }}</template>
    </el-input>
  </div>
  <!-- 时间选择器 -->
  <div v-if="element.type === 'time'" class="item item-flex">
    <div class="title">
      <span class="require-icon" v-if="element.options.required">{{
        element.name
      }}</span>
      <span v-else>{{ element.name }}</span>
    </div>
    <el-time-picker
      type="datetime"
      :placeholder="element.options.placeholder"
      :format="element.options.dateFormat"
      disabled
    />
  </div>

  <!-- 时间选择器 -->
  <div v-if="element.type === 'time-range'" class="item item-flex">
    <div class="title">
      <span class="require-icon" v-if="element.options.required">{{
        element.name
      }}</span>
      <span v-else>{{ element.name }}</span>
    </div>
    <el-time-picker
      type="datetime"
      is-range
      :placeholder="element.options.placeholder"
      :format="element.options.dateFormat"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      disabled
    />
  </div>
  <!-- 图片 -->
  <div v-if="element.type === 'upload-picture'" class="item item-flex">
    <div class="title">
      <span class="require-icon" v-if="element.options.required">{{
        element.name
      }}</span>
      <span v-else>{{ element.name }}</span>
    </div>
    <el-upload
      style="width: 50px; height: 50px"
      list-type="picture-card"
      disabled
    >
      <el-icon><Plus /></el-icon>
    </el-upload>
  </div>
  <!-- 文件 -->
  <div v-if="element.type === 'upload-file'" class="item item-flex">
    <div class="title">
      <span class="require-icon" v-if="element.options.required">{{
        element.name
      }}</span>
      <span v-else>{{ element.name }}</span>
    </div>
    <el-upload class="upload-file" disabled>
      <el-button style="width: 100%" disabled>
        <el-icon><Upload /></el-icon>
        上传文件
      </el-button>
    </el-upload>
  </div>
  <!-- 自定义组件 -->
  <div v-if="element.type === 'customComponents'" class="item item-flex">
    <div class="title">
      <span class="require-icon" v-if="element.options.required">{{
        element.name
      }}</span>
      <span v-else>{{ element.name }}</span>
    </div>
    <slot :name="element.options.slotName">
      <div>{{ element.options.slotName }}</div>
    </slot>
  </div>

  <div v-if="element.type === 'layout'" class="item item-flex">
    <div class="title">
      <span class="require-icon" v-if="element.options.required">{{
        element.name
      }}</span>
      <span v-else>{{ element.name }}</span>
    </div>
    <div>
      <draggable
        class="container"
        :list="element.items"
        group="form"
        :options="{ animation: 300, chosenClass: 'choose', sort: true }"
        @add="dragDown"
        @end="dragEnd"
        @change="handleDragChange"
      >
        <template #item="{ element, index }">
          <div
            @click.stop="handleClick(element, index)"
            :class="[
              'el',
              { active: selectFormItem && selectFormItem.id === element.id },
            ]"
          >
            <element-comp :element="element" />
            <div>
              <el-icon class="icon" @click.stop="removeAt(index)">
                <Delete />
              </el-icon>
              <!-- <DeleteIcon class="icon" @click.stop="removeAt(index)" /> -->
            </div>
          </div>
        </template>
        <template #footer>
          <div class="drag-tip">
            <!-- <MoveIcon class="tip-icon" /> -->
            <span>点击或拖拽左侧控件至此处</span>
          </div>
        </template>
      </draggable>
    </div>
  </div>

  <div v-if="element.type === 'table'" class="item item-flex">
    <div class="title">
      <span class="require-icon" v-if="element.options.required">{{
        element.name
      }}</span>
      <span v-else>{{ element.name }}</span>
    </div>
    <div>
      <draggable
        class="container"
        :list="element.columns"
        group="form"
        :options="{ animation: 300, chosenClass: 'choose', sort: true }"
        @add="dragDown"
        @end="dragEnd"
        @change="handleDragChange"
      >
        <template #item="{ element, index }">
          <div
            @click.stop="handleClick(element, index)"
            :class="[
              'el',
              { active: selectFormItem && selectFormItem.id === element.id },
            ]"
          >
            <element-comp :element="element" />
            <div>
              <el-icon class="icon" @click.stop="removeTableAt(index)">
                <Delete />
              </el-icon>
              <!-- <DeleteIcon class="icon" @click.stop="removeAt(index)" /> -->
            </div>
          </div>
        </template>
        <template #footer>
          <div class="drag-tip">
            <!-- <MoveIcon class="tip-icon" /> -->
            <span>点击或拖拽左侧控件至此处</span>
          </div>
        </template>
      </draggable>
    </div>
  </div>

  <!-- 栅格布局 -->
  <div v-if="element.type === 'grid'" class="grid-layout">
    <el-row 
      :gutter="element.options.gutter"
      :justify="element.options.justify"
      :align="element.options.align"
    >
      <el-col 
        v-for="(col, index) in element.options.columns"
        :key="index"
        :span="col.span"
      >
        <div class="grid-col">
          <slot :name="`grid-col-${index}`">
            <div class="grid-placeholder">列 {{ index + 1 }}</div>
          </slot>
        </div>
      </el-col>
    </el-row>
  </div>

  <!-- 卡片布局 -->
  <div v-if="element.type === 'card'" class="card-layout">
    <el-card 
      :shadow="element.options.shadow"
      :header="element.options.title"
    >
      <slot name="card-content">
        <div class="card-placeholder">卡片内容区域</div>
      </slot>
    </el-card>
  </div>

  <!-- 标签页 -->
  <div v-if="element.type === 'tabs'" class="tabs-layout">
    <el-tabs
      v-model="activeTab"
      :type="element.options.type"
      :tab-position="element.options.tabPosition"
    >
      <el-tab-pane
        v-for="tab in element.options.tabs"
        :key="tab.name"
        :label="tab.label"
        :name="tab.name"
      >
        <slot :name="`tab-${tab.name}`">
          <div class="tab-placeholder">标签页 {{ tab.label }} 内容</div>
        </slot>
      </el-tab-pane>
    </el-tabs>
  </div>

  <!-- 折叠面板 -->
  <div v-if="element.type === 'collapse'" class="collapse-layout">
    <el-collapse v-model="activeCollapse" :accordion="element.options.accordion">
      <el-collapse-item
        v-for="panel in element.options.panels"
        :key="panel.name"
        :title="panel.title"
        :name="panel.name"
      >
        <slot :name="`panel-${panel.name}`">
          <div class="collapse-placeholder">折叠面板 {{ panel.title }} 内容</div>
        </slot>
      </el-collapse-item>
    </el-collapse>
  </div>

  <!-- 容器 -->
  <div v-if="element.type === 'container'" class="container-layout">
    <div 
      class="container-content"
      :style="{
        width: element.options.width,
        minHeight: element.options.minHeight,
        background: element.options.background,
        border: element.options.border,
        borderRadius: element.options.borderRadius,
        padding: element.options.padding
      }"
    >
      <slot name="container-content">
        <div class="container-placeholder">拖拽组件到这里</div>
      </slot>
    </div>
  </div>

  <!-- 步骤条 -->
  <div v-if="element.type === 'steps'" class="steps-layout">
    <el-steps 
      :active="element.options.active"
      :direction="element.options.direction"
      :align-center="element.options.alignCenter"
      :simple="element.options.simple"
    >
      <el-step
        v-for="(step, index) in element.options.steps"
        :key="index"
        :title="step.title"
        :description="step.description"
      >
        <template #default>
          <slot :name="`step-${index}`">
            <div class="step-placeholder">步骤 {{ index + 1 }} 内容</div>
          </slot>
        </template>
      </el-step>
    </el-steps>
  </div>

  <!-- 级联选择 -->
  <div v-if="element.type === 'cascader'" class="item item-flex">
    <div class="title">
      <span class="require-icon" v-if="element.options.required">{{ element.name }}</span>
      <span v-else>{{ element.name }}</span>
    </div>
    <el-cascader
      v-model="localFormData"
      :options="element.options.options"
      :props="{
        multiple: element.options.multiple,
        checkStrictly: !element.options.showAllLevels,
        emitPath: element.options.showAllLevels
      }"
      :placeholder="element.options.placeholder"
      :clearable="element.options.clearable"
      :collapse-tags="element.options.collapseTags"
      :separator="element.options.separator"
      @change="handleChange"
    />
  </div>

  <!-- 穿梭框 -->
  <div v-if="element.type === 'transfer'" class="item item-flex">
    <div class="title">
      <span class="require-icon" v-if="element.options.required">{{ element.name }}</span>
      <span v-else>{{ element.name }}</span>
    </div>
    <el-transfer
      v-model="localFormData"
      :data="element.options.data"
      :titles="element.options.titles"
      :filterable="element.options.filterable"
      :filter-placeholder="element.options.filterPlaceholder"
      @change="handleChange"
    />
  </div>

  <!-- 评分 -->
  <div v-if="element.type === 'rate'" class="item item-flex">
    <div class="title">
      <span class="require-icon" v-if="element.options.required">{{ element.name }}</span>
      <span v-else>{{ element.name }}</span>
    </div>
    <el-rate
      v-model="localFormData"
      :max="element.options.max"
      :allow-half="element.options.allowHalf"
      :show-score="element.options.showScore"
      :show-text="element.options.showText"
      :texts="element.options.texts"
      @change="handleChange"
    />
  </div>

  <!-- 滑块 -->
  <div v-if="element.type === 'slider'" class="item item-flex">
    <div class="title">
      <span class="require-icon" v-if="element.options.required">{{ element.name }}</span>
      <span v-else>{{ element.name }}</span>
    </div>
    <el-slider
      v-model="localFormData"
      :min="element.options.min"
      :max="element.options.max"
      :step="element.options.step"
      :show-input="element.options.showInput"
      :range="element.options.range"
      :marks="element.options.marks"
      @change="handleChange"
    />
  </div>

  <!-- 颜色选择器 -->
  <div v-if="element.type === 'color-picker'" class="item item-flex">
    <div class="title">
      <span class="require-icon" v-if="element.options.required">{{ element.name }}</span>
      <span v-else>{{ element.name }}</span>
    </div>
    <el-color-picker
      v-model="localFormData"
      :show-alpha="element.options.showAlpha"
      :color-format="element.options.colorFormat"
      :predefine="element.options.predefine"
      @change="handleChange"
    />
  </div>
</template>
<script setup>
import { ref, watch, toRefs } from "vue";
import { useStore } from "vuex";
import draggable from "vuedraggable";
import elementComp from "./ElementComps.vue";

const props = defineProps({
  element: {
    type: Object,
    required: true
  },
  formData: {
    type: [String, Number, Array, Object],
    default: null
  }
});

const emits = defineEmits(['update:formData', 'inputBlur', 'currentItemClick']);
const store = useStore();

// 初始化本地表单数据
const localFormData = ref(props.formData);

// 处理表单数据更新
const handleChange = (value) => {
  if (props.element && props.element.id) {
    localFormData.value = value;
    emits('update:formData', value);
  }
};

// 处理输入框失焦
const handleBlur = () => {
  emits('inputBlur');
};

// 处理点击事件
const handleClick = (element, index) => {
  emits('currentItemClick', element, index);
};

// 监听 props.formData 的变化
watch(
  () => props.formData,
  (newVal) => {
    localFormData.value = newVal;
  }
);

// 监听本地数据的变化
watch(
  localFormData,
  (newVal) => {
    if (props.element && props.element.id) {
      emits('update:formData', newVal);
    }
  }
);

const activeTab = ref('tab1')
const activeCollapse = ref(['panel1'])
</script>

<style lang="scss" scoped>
/* 基础样式 */
.item-flex {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
  font-size: 13px;
  color: #1d2129;

  .title {
    display: inline-block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #606266;

    .require-icon {
      position: relative;
      &::after {
        content: "*";
        position: absolute;
        left: 100%;
        top: -2px;
        line-height: 20px;
        padding-left: 2px;
        color: #f56c6c;
      }
    }
  }

  .sky-item {
    flex: 1;
  }
}

/* 输入框组件样式 */
:deep(.el-input__wrapper) {
  height: 32px;
  padding: 0 12px;
  background-color: #f8fafc;
  border-radius: 4px;
  box-shadow: none !important;
  border: 1px solid #e5e7eb;

  &:hover {
    border-color: #409EFF;
    background-color: #f0f7ff;
  }

  &.is-focus {
    background-color: #fff;
    border-color: #409EFF;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1) !important;
  }
}

/* 表格组件样式 */
.table-component {
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  overflow: hidden;

  :deep(.el-table) {
    font-size: 13px;

    th {
      background-color: #f8fafc;
      font-weight: 500;
      color: #606266;
      height: 40px;
      padding: 8px 12px;
    }

    td {
      padding: 8px 12px;
    }

    .cell {
      line-height: 1.5;
    }
  }
}

/* 分栏组件样式 */
.layout-component {
  display: grid;
  gap: 12px;
  margin: 8px 0;

  &.col-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  &.col-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  &.col-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .layout-item {
    background: #f8fafc;
    border: 1px dashed #e5e7eb;
    border-radius: 4px;
    padding: 12px;
    min-height: 60px;
    transition: all 0.3s ease;

    &:hover {
      border-color: #409EFF;
      background: #f0f7ff;
    }

    &.active {
      border-style: solid;
      border-color: #409EFF;
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
    }
  }
}

/* 描述文本样式 */
.desc {
  padding: 8px 12px;
  background: #f8fafc;
  border-radius: 4px;
  font-size: 13px;
  color: #606266;
  line-height: 1.5;
}

/* 分割线样式 */
.divider-wrap {
  margin: 16px 0;
  
  :deep(.el-divider__text) {
    font-size: 13px;
    color: #909399;
    background: #fff;
    padding: 0 12px;
  }
}

/* 单选和多选组件样式 */
:deep(.el-radio-group),
:deep(.el-checkbox-group) {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;

  &.vertical {
    flex-direction: column;
  }

  .el-radio,
  .el-checkbox {
    margin: 0;
    padding: 6px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    transition: all 0.3s ease;

    &:hover {
      border-color: #409EFF;
      background: #f0f7ff;
    }

    &.is-checked {
      border-color: #409EFF;
      background: #f0f7ff;
    }
  }
}

/* 上传组件样式 */
.upload-component {
  :deep(.el-upload) {
    border: 1px dashed #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.3s ease;

    &:hover {
      border-color: #409EFF;
      background: #f0f7ff;
    }
  }

  :deep(.el-upload-list) {
    margin-top: 8px;
  }

  :deep(.el-upload-list__item) {
    padding: 4px 8px;
    height: 32px;
    line-height: 24px;
  }
}

/* 响应式处理 */
@media screen and (max-width: 768px) {
  .layout-component {
    &.col-3,
    &.col-4 {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  :deep(.el-radio-group),
  :deep(.el-checkbox-group) {
    .el-radio,
    .el-checkbox {
      padding: 4px 8px;
      font-size: 12px;
    }
  }
}

@media screen and (max-width: 480px) {
  .layout-component {
    &.col-2,
    &.col-3,
    &.col-4 {
      grid-template-columns: 1fr;
    }
  }
}

/* 布局组件样式 */
.grid-layout {
  .grid-col {
    min-height: 50px;
    background: #f8fafc;
    border: 1px dashed #e5e7eb;
    border-radius: 4px;
    
    .grid-placeholder {
      height: 100%;
      padding: 12px;
      color: #909399;
      font-size: 13px;
      text-align: center;
    }
  }
}

.card-layout {
  .card-placeholder {
    padding: 20px;
    color: #909399;
    font-size: 13px;
    text-align: center;
  }
}

.tabs-layout,
.collapse-layout {
  .tab-placeholder,
  .collapse-placeholder {
    padding: 16px;
    color: #909399;
    font-size: 13px;
    text-align: center;
  }
}

/* 容器组件样式 */
.container-layout {
  .container-content {
    transition: all 0.3s ease;
    
    &:hover {
      border-color: var(--el-color-primary);
      background: var(--el-color-primary-light-9);
    }
    
    .container-placeholder {
      color: #909399;
      font-size: 13px;
      text-align: center;
      padding: 20px;
    }
  }
}

/* 步骤条组件样式 */
.steps-layout {
  :deep(.el-steps) {
    padding: 20px;
  }
  
  .step-placeholder {
    padding: 16px;
    margin-top: 20px;
    background: #f8fafc;
    border: 1px dashed #e5e7eb;
    border-radius: 4px;
    color: #909399;
    font-size: 13px;
    text-align: center;
  }
}
</style>
<style lang="less">
.el-popper.el-dropdown__popper {
  min-width: 190px;
  transform-origin: center top;
  z-index: 2011;
  position: absolute;
  left: 375px;
  top: 126px;
  margin: 0px;
}
.content-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: auto;
  height: calc(100% - 70px);
  box-sizing: border-box;
  margin: 20px 20px 50px;
  padding: 24px;
  background: #fff;
  .title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    outline: none;
  }
  .container {
    flex: 1;
    .el {
      display: flex;
      margin: 3px;
      position: relative;
      border: 1px dashed rgba(170, 170, 170, 0.5);
      // background-color: rgba(236, 245, 255, 0.3);
      overflow: hidden;
      min-height: 50px;
      min-width: 50px;
      outline: 1px solid #fff;

      .item {
        margin-bottom: 18px;
      }

      .operate {
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        align-items: center;
        height: 28px;
        line-height: 28px;
        cursor: pointer;
        display: none;
        background: #076bb0;

        .icon {
          margin: 5px 5px 0 7px;
        }
      }
      .show-operate {
        display: block;
      }
    }

    .drag-tip {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 5px;
      color: #8f959e;
      font-size: 16px;
      line-height: 20px;
      padding: 6px 12px;
      background: #f5f6f7;

      .tip-icon {
        width: 20px;
        position: relative;
        bottom: 1px;
        margin-right: 5px;
      }
    }
    .error {
      position: relative;
      border: 1px solid #f54a45;
    }
    .active {
      position: relative;
      outline: 2px solid #f56c6c;
      // border: 1px solid #f56c6c;
      //border-right: 4px solid #f56c6c;
    }
  }
}
</style>
